<template>
  <div>
    <div id="bigDiv">

      <el-row>
        <!--左边介绍框-->
        <el-col span="5">
            <div class="hhDiv">
                      <h4>{{$store.state.doctor.name}}的简介</h4>
                        <div id="remarkDiv">
                            <label>
                                {{$store.state.doctor.tDoctorInfo.remark}}
                            </label>
                        </div>
                        <div  >

                            <el-image style="width:100px;padding-top:80px" :src="require('../../img/littleIcon/two.jpg')"></el-image>
                            <br>
                            <span>微信扫一扫在线咨询</span><br><br>
                            <label style="color:grey;font-size:14px">专业医生为你解答</label><br><br>
                        </div>
            </div>
        </el-col>
        <!--聊天框-->
        <el-col span="13" offset="1">
            <div class="hhDiv chatDiv">
                <div id="infoDiv">
                  <el-container>
                    <!--头部-->
                    <el-header> 
                      <div id="headDiv">
                        <span>{{$store.state.doctor.name}}</span>
                      </div>
                    </el-header>
                    <el-main id="msgDiv">
                      <div style="padding-left:0px">
                        <el-row v-for="item in chatInfo" :key="item">
                          <!--患对医-->
                          <div  v-show="item.direction==1">
                              <el-col span=2>
                                <el-avatar :size="35" :src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"></el-avatar>
                              </el-col>
                              <el-col span=22 style="text-align:left">
                                <div class="fontDiv">
                                  <p>{{item.info}}</p>
                                </div>
                              </el-col>
                          </div>
                        <!--医对患-->
                          <div  v-show="item.direction==0">
                              <el-col span=22 style="text-align:left">
                                <div style="background-color:rgb(142, 255, 127);border-radius: 4px;border: 1px solid white">
                                  <p>{{item.info}}</p>
                                </div>
                              </el-col>
                              <el-col span=2>
                                <el-avatar :size="35" :src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"></el-avatar>
                              </el-col>
                          </div>
                          
                        </el-row>
                      
                      </div>
                    </el-main>
                  </el-container>
                  

                </div>
                <div id="sendDiv">
                     <el-input type="textarea" rows="6" v-model="message" >

                     </el-input>
                     <el-button type="success" id="sendBtn" @click="sendMsg()" size="mini">发送</el-button>
                </div>
            </div>
        </el-col>
        <el-col span=5>
          <div class="doctorDiv" >
                   <el-avatar :size="150" :src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"></el-avatar>
                 <br><br><span style="color:aqua;font-size:20px">{{$store.state.doctor.name}}   </span><br><br>
                   <span>{{$store.state.doctor.tDoctorInfo.duty}}</span><br><br>
                  <label style="color:grey;font-size:14px">{{$store.state.doctor.tClinicDepartment.name}}</label><br><br>
                  <label style="color:grey;font-size:14px">{{$store.state.doctor.tDoctorInfo.hospital}}</label><br><br>
                  <label style="color:grey;font-size:14px">擅长：{{$store.state.doctor.tDoctorInfo.speciality}} </label>

              </div>
        </el-col>
      </el-row>
    </div>
    <InformationBottom></InformationBottom>
  </div>
</template>

<script>
import InformationBottom from '../../components/healthyInformation/InformationBottom.vue'
import axios from 'axios'
export default {
  data() {
    return {
      message:'',
      chatInfo:[]
    }
  },
  methods:{
    initMessage(){
        axios.post("/chatInfo/queryChatInfo",{'doctorId':this.$store.state.doctor.id}).then((response)=>{
            //alert(response.data);
             this.chatInfo=response.data;
        })
    },
    sendMsg() {
      axios.post("/chatInfo/addChatInfo",{"msg":this.message,"doctorId":this.$store.state.doctor.id}).then(()=>{
          this.initMessage();
          this.message=null
      })
    }
  },
  mounted(){
    this.initMessage();
  },
   components:{
            InformationBottom 
    },
}
</script>

<style>
#bigDiv{
  /*height: 1000px;*/
}
.hhDiv ,#headDiv{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
#questDiv{
  /*width: 1000px;*/
  text-align: left;
  padding-left: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  
}
.chatDiv{
  height: 447px;
}
#infoDiv{
  height: 320px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
#sendBtn{
  position: relative;
  right: -280px;
  bottom: 40px;
}
#msgDiv{
  overflow:scroll;
  height: 280px;
}
.fontDiv{
  background-color: white;
  border-radius: 4px;
  border: 1px solid white;
}
.doctorDiv {
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      height: 430px;
      /*color: aqua;*/
}

</style>